<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="../assets/images/logo.png">
  <title>文章归档</title>

  <!-- 部署项目要改的地方 -->
  <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
  <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../assets/css/normalize.css">
  <link rel="stylesheet" href="../assets/css/archives.css">

  <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
  <script src="http://minio.java.itsource.cn/resources/vue/dist/vue.min.js"></script>
  <script src="http://minio.java.itsource.cn/resources/element-ui/lib/index.js"></script>
  <script src="http://minio.java.itsource.cn/resources/jQuery/tmp/jquery.js"></script>
  <script src="http://minio.java.itsource.cn/resources/bootstrap/dist/js/bootstrap.bundle.js"></script>
  <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
  <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
  <script src="http://minio.java.itsource.cn/resources/http-vue-loader/src/httpVueLoader.js"></script>
  <script src="http://minio.java.itsource.cn/resources/axios/dist/axios.min.js"></script>
  <script src="../assets/js/common.js"></script>

  <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
  <!--   <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../assets/css/normalize.css">
  <link rel="stylesheet" href="../assets/css/archives.css"> -->

  <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
  <!--   <script src="../node_modules/vue/dist/vue.min.js"></script>
  <script src="../node_modules/element-ui/lib/index.js"></script>
  <script src="../node_modules/jQuery/tmp/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script> -->
  <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
  <!--   <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="../assets/js/common.js"></script> -->

</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 70px">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <div class="timebox card mt-3 bg-light">
              <div class="timeline mt-3" v-for="obj1 in articles">
                <h3>
                  {{obj1.year}}
                </h3>
                <ul v-for="obj2 in obj1.articleList">
                  <li>
                    <h4>
                      {{obj2.day}}<span>{{obj2.month}}</span>
                    </h4>
                    <a :href="'blog-detail.html?' + obj2.id" target="_blank">
                      {{obj2.articleName}}
                    </a>
                  </li>
                </ul>

              </div>
            </div>
          </div>

          <!-- 侧边栏
              sidebar：用于使用jQuery引入侧边栏组件
              col-md-4：此侧边栏站整个网格的4份
              mb-5：侧边栏距离下面5rem
              d-none d-sm-block：在xs尺寸下隐藏，适用于手机
          -->
          <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
            <my-sidebar></my-sidebar>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    new Vue({
      el: "#app",
      // 数据
      data() {
        return {
          // 根据创建时间查询文章的数据
          articleCreateTime: '', // 文章创建时间
          articles: [], // 文章数据
        }
      },

      // 方法
      methods: {

        // 获取文章数据
        getArticleCreateTime() {
          // 判断url是否包含创建时间
          if (location.href.lastIndexOf("?") != -1) {
            // 截取url的创建时间
            let urlTime = location.href.substring(location.href.lastIndexOf("?") + 1);
            // 对中文进行解码
            urlTime = decodeURIComponent(urlTime);
            // 将解码后的urlTime赋值给articleCreateTime
            this.articleCreateTime = urlTime;
          } else {
            // No Time表示查询所有
            this.articleCreateTime = "No Time"; // 不能为空, 否则查询所有文章的归档会发送请求失败
          }
          // 获取根据创建时间下面所有的文章
          this.$http.get("/article/getArticleByTime/" + this.articleCreateTime).then(res => {
            // 给文章数据赋值
            this.articles = res.data;
          }).catch(error => {
            this.$message.error("好像遇到问题了(╯﹏╰)b, 请稍后再试!")
          })
        }
      },

      // 组件
      components: {
        // 将组建加入组建库
        'my-header': httpVueLoader('./common/header.vue'),
        'my-sidebar': httpVueLoader('./common/sidebar.vue')
      },

      // 钩子函数
      mounted() {
        // 获取文章数据
        this.getArticleCreateTime();

      },
    })
  </script>

</body>

</html>